<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="grid-content bg-purple-dark">
          <el-input v-model="search" circle placeholder="请患者姓名"></el-input>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple-dark">
          <el-date-picker
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            v-model="date"
            type="date"
            placeholder="选择检查时间"
          >
          </el-date-picker>
        </div>
      </el-col>
       <el-col :span="4">
        <div class="grid-content bg-purple-dark">
          <el-input v-model="phone" circle placeholder="请输入检查项目"></el-input>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-purple-dark">
          <el-button
            type="primary"
            @click="submit"
            icon="el-icon-search"
            circle
          ></el-button>
        </div>
      </el-col>
    </el-row>

    <el-table
    v-if="tableData.length>0"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" > </el-table-column>
      <el-table-column label="序号" >
        <template slot-scope="scope">{{ scope.row.num }}</template>
      </el-table-column>
      <el-table-column label="姓名">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="性别">
        <template slot-scope="scope">{{ scope.row.sex }}</template>
      </el-table-column>
      <el-table-column label="年龄">
        <template slot-scope="scope">{{ scope.row.age }}</template>
      </el-table-column>
      <el-table-column label="就诊科室">
        <template slot-scope="scope">{{ scope.row.className }}</template>
      </el-table-column>
      <el-table-column label="诊断类型" >
        <template slot-scope="scope">{{ scope.row.zdtype }}</template>
      </el-table-column>
      <el-table-column label="时间">
        <template slot-scope="scope">{{ scope.row.Datetiom }}</template>
      </el-table-column>
      <el-table-column label="检查项目">
        <template slot-scope="scope">{{ scope.row.demo }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
             <el-button type="primary" @click="seendetail(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip>
      </el-table-column> -->
    </el-table>
    <div class="bigwhite" v-else>
             没有任何数据
    </div>
    <div style="margin-top: 20px">
      <!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])"
        >切换第二、第三行的选中状态</el-button
      > -->
      
     <el-row :gutter="10">
        <el-col :span="3"><el-button type="danger" @click="delmany">批量删除</el-button></el-col>
        <el-col :span="10"
          ><div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              :current-page.sync="currentPage3"
              :page-size="100"
              layout="prev, pager, next, jumper"
              :total="1000"
            >
            </el-pagination></div
        ></el-col>
        
      </el-row>
    </div>

  </div>
</template>

<script>
export default {
  name: "baogaochaxun",
  data() {
    return {
      phone:"",
      zhuyuanhao:"",
      bingchuanghao:"",
      search: "",
      date: "",

tableData: [
        // {
        //   date: "2016-05-03",
        //   name: "王小虎1",
        //   address: "上海市普陀区金沙江路 1518 弄",
        // }
        {
          num:"37",
          name:"小明",
          sex:"男",
          age:50,
          className:"外科",
          zhenduan:"复诊",
          province:"河南",
          city:"郑州",
          doctors: "赵医师",
          zdtype:"检查",
          demo:"血糖",
          date:"2020-12-8",
          Datetiom:this.$moment(new Date()).format('YYYY-MM-DD  HH:mm:ss'),
        },
         {
          num:"3",
          name:"小明",
          sex:"男",
          age:50,
          className:"外科",
          zhenduan:"复诊",
          province:"河南",
          city:"郑州",
          doctors: "赵医师",
          zdtype:"诊断",
          demo:"甲状腺",
          date:"2020-12-8",
         Datetiom:this.$moment(new Date()).format('YYYY-MM-DD  HH:mm:ss'),
        },
         {
          num:"30",
          name:"小明",
          sex:"男",
          age:50,
          className:"外科",
          zhenduan:"复诊",
          province:"河南",
          city:"郑州",
          zdtype:"检查",
          doctors: "赵医师",
          demo:"心脏",
          date:"2020-12-8",
          Datetiom:this.$moment(new Date()).format('YYYY-MM-DD  HH:mm:ss'),
        },
         {
          num:"28",
          name:"小明",
          sex:"男",
          age:50,
          className:"外科",
          zhenduan:"初诊",
          province:"河南",
          city:"郑州",
          doctors: "赵医师",
          zdtype:"检查",
          demo:"血糖",
          date:"2020-12-8",
          Datetiom:this.$moment(new Date()).format('YYYY-MM-DD  HH:mm:ss'),
        },
         {
          num:"38",
          name:"小明",
          sex:"男",
          age:50,
          className:"外科",
          zhenduan:"复诊",
          province:"河南",
          city:"郑州",
          doctors: "赵医师",
          zdtype:"诊断",
          demo:"肾脏",
          date:"2020-12-8",
           Datetiom:this.$moment(new Date()).format('YYYY-MM-DD  HH:mm:ss'),
        },
         {
          num:"307",
          name:"小明",
          sex:"男",
          age:50,
          className:"外科",
          zhenduan:"初诊",
          province:"河南",
          city:"郑州",
          doctors: "赵医师",
          zdtype:"检查",
          demo:"血糖",
          date:"2020-12-8",
          Datetiom:this.$moment(new Date()).format('YYYY-MM-DD  HH:mm:ss'),
        }
      ],
      multipleSelection: [], //我把选中的每一个放入这个数组里面
        currentPage3: 5,
    };
  },
// updated() {
//   for (let i = 0; i < this.tableData.length; i++) {
//     this.tableData.Datetiom[i]=this.Datetiom
//   }
//   return 
// },
  methods: {
   
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
    del(i) {
      var blo = confirm("确认要删除吗");
      if (blo) {
        this.porieList.splice(i, 1);
      }
    },
    submit() {
      console.log(this.search, this.date);
    },
    seendetail(rows){ //单机查看按钮
      console.log(rows)
      sessionStorage.setItem('row',JSON.stringify(rows))

      this.$router.push({path:'/index/baogaoIndex/baogaodit',query:{row:rows}})
    },
    delmany(){
      console.log(this.multipleSelection)
      for(let i =0;i<this.tableData.length;i++){
          for (let j = 0; j < this.multipleSelection.length; j++) {
           
            if(this.tableData[i]==this.multipleSelection[j]){
                  this.tableData.splice(i,1)

            }
          }

      }
    },
//取消选择
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
}
</script>

<style lang="scss" scoped>
.is-circle{
  background: #16dcb8;
  border: none;
}
</style>